<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>国庆作业-3D发光盒子</title>
        <style>
            /* 15. 背景样式美化 */
            body {
                /* 设置背景图 */
                background-image: radial-gradient(#000,lightyellow,#000);
                /* 背景图高度撑满整个视口viewport */
                height:100vh;
            }
            /* 4. 给正方体各个面做统一样式设置 */
            .boxs>div {
                /* 设置宽高 */
                width:200px;
                height:200px;
                /* 暂时设置边框以便编译过程查看效果 */
                border: 3px solid red;
                /* 设置字体大小 */
                font-size:80px;
                /* 文字水平居中 */
                text-align: center;
                /* 文字垂直居中 */
                line-height:200px;
                /* 5. 使用绝对定位使其脱离文档流 方便后续通过变换构建正方体 */
                position:absolute;
                /* 16. 再对每个面进行美化 */
                /* 设置金色的边框 换掉原先设置的边框 */
                border:1px solid gold;
                /* 设置文字颜色 */
                color:gold;
                /* 设置边框圆角 */
                border-radius:50px;
                /* 设置带不透明度的背景颜色 不透明度 0为完全透明 1为完全不透明 0.5为半透明*/
                background-color: rgba(255,255,255,0.5);
                /* 使用阴影制作发光效果 */
                box-shadow:0 0 60px 0 gold;
            }
            /* 6. 定义视角 */
            .show {
                /* 视角距离一般为800px
                    值越小距离越近则元素会严重变形
                    值越大距离越远则元素3D效果不明显 */
                perspective: 800px;
            }
            /* 7. 给"体"开启3D效果 */
            .boxs {
                /*需要给父元素加3D变换效果 这样其所有子元素才可以使用*/
                transform-style: preserve-3d;
                /* 8. 子元素使用相对定位脱离了文档流 需要设置父元素宽高使子元素定位 */
                width:200px;
                height:200px;
                /* 9. 让正方体水平居中 垂直方向靠下一些 */
                margin:300px auto;
                /* 12.2 给正方体使用动画，6个面都需要同步旋转 */
                /* 播放动画：turn刚定义的动画名 时长10s linear匀速播放 infinite无限次播放 */
                animation:turn 10s linear infinite;
            }
            /* 10. 设置正方体中"前面"在空间中的位置 */
            .boxs>.p1 {
                /* 沿Z轴出来100px */
                transform:translateZ(100px);
            }
            /* 11. 设置正方体中"后面"在空间中的位置 */
            .boxs>.p2 {
                /* 13. 沿Z轴进去100px scaleX(-1)设置水平镜面翻转文字 */
                transform: translateZ(-100px) scaleX(-1);
            }
            /* 14. 把剩余4个面放到相对应的位置 */
            .boxs>.p3 {
                /* 先X轴(水平)旋转90度，再沿Z轴出来100px */
                transform: rotateX(90deg) translateZ(100px);
            }
            .boxs>.p4 {
                /* 先X轴(水平)旋转90度，再沿Z轴进去100px 设置水平镜面翻转文字*/
                transform: rotateX(90deg) translateZ(-100px) scaleX(-1);
            }
            .boxs>.p5 {
                /* 先Y轴(垂直)旋转90度，再沿Z轴出来100px */
                transform: rotateY(90deg) translateZ(100px);
            }
            .boxs>.p6 {
                /* 先Y轴(垂直)旋转90度，再沿Z轴进去100px 设置水平镜面翻转文字*/
                transform: rotateY(90deg) translateZ(-100px) scaleX(-1);
            }
            /* 12.1 让正方体转起来 */
            /* @keyframes定义动画 turn为动画名 */
            @keyframes turn {
                100% {
                    /* 表示到动画结束时，同时绕X轴、Y轴转1圈，Z轴不转 */
                    transform: rotate3d(1,1,0,360deg);
                }
            }
            /* 12.3 当悬停在正方体上时，动画播放进入暂停状态 */
            .boxs:hover {
                animation-play-state: paused;
            }

        </style>

    </head>
    <body>
        <!-- 1. 第一层div设置视角 -->
        <div class="show">
            <!-- 2. 第二层div代表正方'体' -->
            <div class="boxs">
                <!-- 3. 内层的每个div代表正方体的每个"面" -->
                <div class="p1">1</div>
                <div class="p2">2</div>
                <div class="p3">3</div>
                <div class="p4">4</div>
                <div class="p5">5</div>
                <div class="p6">6</div>
            </div>
        </div>

    </body>
</html>